<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>创建产品</span>
</div>

	<el-form ref="form" :rules="rules" :model="form" label-width="180px">

	  <el-form-item label="产品名称：" prop="name" >
	    <el-input v-model="form.name" placeholder="请输入产品名称" style="width:300px;"></el-input>
	  </el-form-item>

	  <el-form-item label="产品类型：">
	    <el-radio-group v-model="form.product_attr">
	      <el-radio label="1" >电子票</el-radio>
	      <!-- <el-radio label="2" >儿童剧</el-radio>
	      <el-radio label="3" >实物</el-radio> -->
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="产品所属：" v-if="form.product_attr == '1'">
	    <el-select v-model="form.sale_belong" placeholder="请选择活动区域">
	      <el-option 
	      v-for="item in label.sale_belong"
	      :label="item.label" :value="item.value"></el-option>
	    </el-select>

	    <el-tooltip class="item" effect="dark" placement="right"
	    content="选择要对接的系统，如果不需要对接默认成自营" >
	    	<i class="el-icon-warning ml10 info pointer"></i>
	    </el-tooltip>
	  </el-form-item>

	  <el-form-item label="所属商家：" prop="place_code">
	  	<el-select v-model="form.place_code" filterable placeholder="请选择商家">
		    <el-option
		      v-for="item in bussinesslist"
		      :key="item.code"
		      :label="item.name"
		      :value="item.code">
		    </el-option>
		</el-select>
		<el-button @click="createBussiness">创建商家</el-button>

		<el-tooltip class="item" effect="dark" placement="right"
	    content="至少选择一个商家，表示这个产品会出这个商家的票" >
	    	<i class="el-icon-warning ml10 info pointer"></i>
	    </el-tooltip>

	  </el-form-item>

	  <el-form-item label="价格模式：">
	    <el-radio-group v-model="form.price_type">
	      <el-radio label="0" >有效期模式</el-radio>
	      <el-radio label="1" >价格日历</el-radio>
	    </el-radio-group>

	    <el-tooltip class="item" effect="dark" placement="right" >
	    	<div slot="content">有效期模式：在有效期范围内都是同一个价格<br/>
	    	价格日历模式：不同日期可以有不同价格库存</div>
	    	<i class="el-icon-warning ml10 info pointer"></i>
	    </el-tooltip>

	  </el-form-item>


	  <el-form-item label="票模式：">
	    <el-radio-group v-model="form.product_attr_sub">
	      <el-radio label="1" >单票</el-radio>
	      <el-radio label="2" >套票</el-radio>
	    </el-radio-group>

	    <el-tooltip class="item" effect="dark" placement="right" >
	    	<div slot="content">单票模式：只有一个票种<br/>
	    	套票模式：可以添加多个票种，但是不可退。</div>
	    	<i class="el-icon-warning ml10 info pointer"></i>
	    </el-tooltip>

	  </el-form-item>


	  <el-form-item label="商城价格：" prop="price">
	    <el-input type="number" v-model.number="form.price" style="width:200px;" ></el-input>

	    <el-tooltip class="item" effect="dark" placement="right"
	    content="创建产品的时候，系统会默认创建一个与产品同名的型号，这个价格是该型号的价格。" >
	    	<i class="el-icon-warning ml10 info pointer"></i>
	    </el-tooltip>

	  </el-form-item>

	  <el-form-item label="有效期：" >
	  	<daterange v-bind:se.sync="s_e" type="daterange"></daterange>

	  	<el-tooltip class="item" effect="dark" placement="right" >
	    	<div slot="content">创建产品的时候，系统会默认创建一个与产品同名的票种<br/>
	    	这个有效期是该票种的有效期</div>
	    	<i class="el-icon-warning ml10 info pointer"></i>
	    </el-tooltip>

	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
	  </el-form-item>

	</el-form>
</el-card>


<el-dialog title="创建商家" :visible.sync="bussinessDlgVisible">
  	<bussiness v-on:save-success="createBussinessSuccess">
  	</bussiness>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import daterange from '../../components/daterange'
import { date2str } from '../../config/util'
import bussiness from '../bussiness'

export default {
	name: 'productnew',
		data () {
		return {
		  	form : {
		  		name : '',
		  		product_attr : '1',
		  		sale_belong : 'qunmeng',
		  		//place_code_array : [],
		  		place_code : '',
		  		price_type : '0',
		  		product_attr_sub : '1',
		  		price : 0,
		  	},

		  	s_e : [date2str(new Date()), new Date().getFullYear() + '-12-31'],
		  	//'s_e' : [new Date(), new Date((new Date()).getFullYear() + '-12-31')],

		  	label : {
		  		sale_belong : [
			        {'label' : '自营', 'value' : 'qunmeng'},
			        {'label' : '居游', 'value' : 'weshop_juyou'},
			        {'label' : '票付通', 'value' : 'weshop_piaofutong'},
			        {'label' : '天时同城（爱旅）', 'value' : 'weshop_tstc_al'},
			        {'label' : '天时同城（北国）', 'value' : 'weshop_tstc_bg'},
			        {'label' : '海洋馆', 'value' : 'weshop_royaloc'},
			        {'label' : '银科环企', 'value' : 'weshop_yinkehuanqi'},
			        {'label' : '自游宝', 'value' : 'weshop_zhiyoubao'},
			        {'label' : '自我游', 'value' : 'weshop_ziwoyou'},
			    ]
		  	},

		  	rules: {
	          name: [
	            { required: true, message: '请输入产品名称', trigger: 'blur' },
	            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
	          ],
	          place_code: [
	            { required: true, message: '请选择商家', trigger: 'change' },
	          ],
	          price: [
	          	{ required: true, message: '价格不能为空', trigger: 'blur' },
	          	{ type: 'number', message: '价格必须为数字值'}
	          ],
	        },

	        bussinessDlgVisible : false,
		}
	},

	components: {
		daterange,
		bussiness,
	},

	computed : {
		...mapGetters([
			'bussinesslist',
		]),
	},

	methods : {
		onSubmit(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            // alert('submit!');
	            this.create();
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	    },

	    create () {

	    	// var pc = this.form.place_code_array[0];
      //       for(var i = 1; i < this.form.place_code_array.length; i++){
      //           pc += ',' + this.form.place_code_array[i];
      //       }

	    	let para = {
	    		name : this.form.name,
				price_type : this.form.price_type,
				product_attr_sub : this.form.product_attr_sub,
				sale_belong : this.form.sale_belong,
				attr_name : this.form.name,
				guide_price : this.form.price,
				place_code : this.form.place_code,
				periodstart : this.s_e[0],
				periodend : this.s_e[1],
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '操作成功',
			          type: 'success'
			        });

			        this.$router.push({
			        	name: 'app.newproductlist', 
			        	query: { opt: 'create' }
			        });
				},
				err : res => {
					this.$notify({
			          title: '操作失败',
			          message: res,
			          type: 'error'
			        });
				}
	    	}

	    	console.log(para);

	    	this.$store.dispatch('createProduct_ticket', para);
	    },


	    createBussiness () {
	    	this.bussinessDlgVisible = true;
	    },

	    createBussinessSuccess () {
	    	this.bussinessDlgVisible = false;
	    	this.$notify({
	          title: '成功',
	          message: '成功创建商家',
	          type: 'success'
	        });
	    	this.$store.dispatch('getBussinessList');
	    },
	},

	watch:{
	    
	},

	created () {
		
	},

	mounted () {
		this.$store.dispatch('getBussinessList');
	},

}
</script>

<style scoped>

</style>
